import clonedeep from 'lodash.clonedeep';
import { EditOnboardingWords } from '@/apis/management/personnel/baseSetting/TransactionSetting/index';
interface pending {
  id?: number;
  node?: string;
  show?: number;
}
export default defineComponent({
  emits: ['update:visible'],
  props: {
    // 显示
    visible: {
      type: Boolean,
      default: false
    },
    // 数据
    data: {
      type: Array,
      default: () => []
    },
    // 修改哪个表头参数
    category: { type: String },
    // 开启刷新
    refresh: { type: Function },
    // 绑定表头显示
    showName: { type: String }
  },
  setup(props, { emit }) {
    watch(
      () => props.data,
      () => {
        console.log(111);
        showData.value = clonedeep(props.data);
        defCategory.value = clonedeep(props.showName);
      }
    );

    const showData = ref();
    const defCategory = ref();
    const handleOk = async () => {
      try {
        pending.map(async (ele) => {
          await EditOnboardingWords(ele);
        });
        props.refresh ? props.refresh() : console.log('有问题呀小老弟');
      } catch (error) {
        console.log(error);
      }
      emit('update:visible', false);
    };
    const handleCancel = () => {
      pending.length = 0;
      props.refresh ? props.refresh() : console.log('有问题呀小老弟');
      emit('update:visible', false);
    };
    // 存储待处理请求参数
    const pending: pending[] = reactive([]);
    // 存储待处理请求参数函数
    const changeHead = (event: boolean, id: number) => {
      const obj = { id, node: props.category, show: event ? 1 : 2 };
      if (!pending.length) pending.push(obj);
      let flag = false;
      flag = pending.some((ele) => ele.id === id);
      !flag
        ? pending.push(obj)
        : pending.forEach((ele, ind) => {
            if (ele.id === id) pending[ind] = obj;
          });
    };
    return () => (
      <a-drawer
        width={500}
        unmount-on-close
        visible={props.visible}
        v-slots={{ title: () => '表头设置' }}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <a-table
          data={showData.value}
          pagination={false}
          stripe={true}
          v-slots={{
            columns: () => (
              <>
                <a-table-column
                  v-slots={{
                    title: () => '字段名称',
                    cell: (props: Record<'record', any>) =>
                      props.record.fieldName
                  }}
                ></a-table-column>
                <a-table-column
                  v-slots={{
                    title: () => '是否显示',
                    cell: (props: Record<'record', any>) => (
                      <>
                        {{ props }}
                        <a-checkbox
                          v-model={props.record[defCategory.value]}
                          onChange={($event: boolean) =>
                            changeHead($event, props.record.id)
                          }
                        ></a-checkbox>
                      </>
                    )
                  }}
                ></a-table-column>
                {/* <a-table-column
                  v-slots={{
                    title: () => '是否必填',
                    cell: (props: Record<'record', any>) => (
                      <a-checkbox v-model={props.record.required}></a-checkbox>
                    )
                  }}
                ></a-table-column> */}
              </>
            )
          }}
        ></a-table>
      </a-drawer>
    );
  }
});
